<template>
  <div class="container">
    <div class="wrap">
      <div class="content">
        <van-cell-group inset>
          <van-field v-model="code" center clearable label="唯一码" placeholder="请输入唯一码">
            <template #button>
              <van-button round @click="handleConfirm" size="small" type="primary">确定</van-button>
            </template>
          </van-field>
        </van-cell-group>
        <!-- <van-cell-group inset>
          <van-field v-model="code" label="唯一码" placeholder="请输入唯一码" />
        </van-cell-group>
        <div class="confirm" @click="handleConfirm">确定</div>-->
        <div class="back">
          <img @click="handleBack" src="@img/shxx/shxx_29.png" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import { getYZWYM } from "@/apis/subjectInfo";

const route = useRoute();
const router = useRouter();
const code = ref();
const qrcodeUrl = ref("https://h5qct.yskjtz.com?sc=t&type=sh&id=");
console.log(route.query);
const userInfo = ref(route.query);
const handleBack = () => {
  router.go("-1");
};
const handleConfirm = () => {
  if (code.value) {
    getYZWYM(code.value).then(res => {
      console.log(res);

      if (res.code == "500") {
        showDialog({
          title: "提示",
          message: res.msg
        }).then(() => {});
      } else {
        localStorage.removeItem("type");
        localStorage.removeItem("marketId");
        localStorage.removeItem("pfmarketId");
        localStorage.setItem("weiyima", code.value);
        emitter.emit("update", code.value);
        router.push({ path: "/home" });
      }
    });
  } else {
    showDialog({
      title: "提示",
      message: "请输入唯一码"
    }).then(() => {});
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100vw;
  background: url("@img/shxx/shxx.png");
  background-size: cover;
  .wrap {
    height: 100%;
    // height: 30%;
    // padding: 70px 40px 20px 40px;
    .content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      //   background: #fff;
      position: relative;
      .van-cell-group {
        border-radius: 25px;
      }
      .van-button {
      }
      .confirm {
        padding: 9px 20px;
        border-radius: 15px;
        background: #fff;
        color: #000000;
      }
      .code {
        width: 70%;
      }
      .btn {
        width: 60%;
        display: flex;
        justify-content: space-between;
      }
      .header {
        text-align: center;
        img {
          width: 300px;
          height: 62px;
        }
      }
      .list {
        padding: 20px 37px;
        span {
          display: inline-block;
          height: 25px;
          line-height: 25px;
          margin-top: 8px;
        }
        .title {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 500;
          font-size: 20px;
          color: #000000;
        }
        .word {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 300;
          font-size: 20px;
          color: #000000;
          img {
            width: 20px;
          }
        }
      }
      .swiper {
        height: 280px;
        .el-image {
          width: 100%;
          height: 230px;
        }
        ::v-deep .el-carousel {
          height: 280px;
          .el-carousel__item {
            height: 230px;
          }
          .el-carousel__container {
            height: 230px;
          }
        }
      }
      .qrcode {
        text-align: center;
        div {
          margin-top: 10px;
          font-weight: 600;
          font-size: 18px;
        }
      }
      .back {
        position: absolute;
        right: 20px;
        bottom: 200px;
        img {
          width: 80px;
        }
      }
    }
  }
}
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #fff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #fff;
}
</style>
